<template>
<div>
  <MainHeader></MainHeader>
  <section class="blog-posts-area section-padding">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 post-list blog-post-list">
          <div class="single-post">
            <img class="img-fluid" :src="product.image" alt="" style="border-radius: 10px;margin-bottom: 20px">
            <div style="display: flex">
              <div class="itemInfo">
                <p style="display: inline-block;margin-right: 10px">分类:</p>
                <el-tag >{{product.category}}</el-tag>
              </div>
              <div class="itemInfo">
                <p style="display: inline-block;margin-right: 10px">学校:</p>
                <el-tag type="success">{{product.school}}</el-tag>
              </div>
              <div class="itemInfo">
              <p style="display: inline-block;margin-right: 10px">上架时间:</p>
              <el-tag type="warning">{{ product.createtime }}</el-tag>
              </div>
            </div>
            <ul class="tags">
              <li><h2>   {{product.commname}}</h2></li>
            </ul>
            <h4>&nbsp;&nbsp;&nbsp;&nbsp;{{product.commdesc}}</h4>
            <div style="display: flex;justify-content: space-around">
              <s style="font-size: 30px">原价：{{product.orimoney}}</s>
              <p style="font-size: 30px;color: red">现价：{{product.thinkmoney}}&nbsp;<i class="iconfont icon-hotfill" style="font-size: 30px"></i></p>
            </div>
              <div style="margin: 10px auto">
                <p>备注：{{product.common}}</p>
              </div>
            <div style="display: flex;justify-content: space-around" >
              <div class="genric-btn primary e-large"  @click="collect" >加入购入车</div>
              <div class="genric-btn danger e-large" @click="buyNow">立即购买</div>
            </div>
            <div v-if="videourl!==''" style="margin-top: 80px">
              <h2>视频（照片）简介</h2>
              <video :src="videourl"></video>
            </div>
            <div v-else><h3 class="title_color" style="margin-top: 80px">糟糕，卖家没有上传视频信息</h3></div>
            <div class="section-top-border">
              <div v-if="otherimg.length!==0">
              <h3 class="title_color">图片展示</h3>
              <div class="row gallery-item">
                <div class="col-md-4" v-for="item in otherimg" >
                  <img :src="item" alt="商品副图" style="width: 200px">
                </div>
              </div>
              </div>
              <h3 class="title_color" v-else>糟糕，卖家没有上传多余照片</h3>
            </div>
          </div>

        </div>

        <div class="col-lg-4 sidebar mt-5 mt-lg-0">
          <div class="single-widget search-widget" style="display: flex">
              <el-input v-model="searchKey" placeholder="搜索商品"></el-input>
            <el-button type="info" icon="el-icon-search" @click="searchInfo">搜索</el-button>
          </div>

          <div class="single-widget">
            <p>卖家信息：</p>
            <div style="display: flex;justify-content: center"> <img :src="sellor.uimage"  style="width: 100px;height: 100px" alt="卖家头像"></div>
            <h4 style="text-align: center">昵称：{{sellor.username==='' ? '卖家不愿意透露':sellor.username}}</h4>
            <p>
             签名：{{sellor.sign}}
            </p>
            <p style="text-align: center">状态：{{sellor.status==='offline'?'不在线':'在线'}}</p>
            <ul @click="drawer = true">
              <li style="font-size: 20px;color: #099e80;text-align: center"><i class="iconfont icon-liaotian1" style="font-size: 20px" ></i>&nbsp;&nbsp;聊一聊</li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </section>

  <el-drawer
    title="聊一聊"
    :visible.sync="drawer"
    direction="rtl"
    :before-close="handleClose">
    <div class="chatContainer">
      <div class="headerContainer"><h4>在正与：<span>{{sellor.username}}</span>&nbsp;&nbsp; 聊天</h4></div>
       <div class="contextContainer">
         <div class="leftInfo" v-for="item in havereceive">
           <img :src="rightUrl" style="width: 50px;height: 50px;">
           <div class="box">{{item.content}}</div>
         </div>
         <div class="rightInfo" v-for="item in havesend">
           <div class="box2">{{item}}</div>
          <div class="messageContainer"><img :src="leftUrl" style="width: 50px;height: 50px;float: right;margin-right: -160px"></div>
         </div>
       </div>
       <div class="footerContainer">
         <el-input
           type="textarea"
           placeholder="发送点东西吧..."
           resize="none"
           v-model="textInfo"
           input-style="{outline:none,border:none}"
           :autosize="{ minRows: 6, maxRows: 6 }"
         />
         <div class="send">
           <el-button type="success" @click="sendInfo">发送</el-button>
         </div>
       </div>
    </div>
  </el-drawer>
  <MainFooter></MainFooter>
</div>
</template>

<script>
import MainHeader from '../pages/Home/header'
import MainFooter from '../pages/Home/footer'
import {getToken} from '../utils/token'
import {baseUrl, leftUrl, rightUrl, wsUrl} from '../utils/Address'
import Moment from 'moment'
export default {
  name: 'Item',
  components: {MainFooter, MainHeader},
  mounted () {
   this.id=this.$route.query.id
    this.getCommodityById(this.id)
  },
  data(){
    return{
      username: window.localStorage.getItem('username')||'',
      ws:Object,
      searchKey:"",
      id: '',
      sellerId:'',
      product: {},
      otherimg:[],
      videourl:'',
      sellor:{},
      drawer:false,
      textInfo:'',
      havesend:[],
      havereceive:[],
      leftUrl:leftUrl,
      rightUrl:rightUrl,
    }
  },
  watch:{
    drawer:{
      handler(newvalue,oldvalue){
        this.ws=new WebSocket(wsUrl + `/${this.username}`)
        this.ws.onopen=this.onOpen
        this.ws.onError=this.onError
        this.ws.onmessage=this.onMessage
        this.ws.onclose=this.onClose
      }
    }
  },
  methods: {
    searchInfo(){
       this.axios.get(`http://f231880v03.qicp.vip/product/search/${this.searchKey}`).then(
         res=>{
           const{data} =res.data
           if(data.message==='查询成功'){
             this.product=data[0]
             this.sellerId = data.userid
             this.getsellorById(this.sellerId)
             this.otherimg=data.otherimg

             this.videourl=data.videourl
           }
         }
       ).catch(
         this.$message.error('服务器错误,获取失败')
       )
    },
    getCommodityById (id) {
      this.axios.get(`${baseUrl}/product-detail/` + id,).then(res => {
        const {data} = res.data
        console.log(data)
        this.product = data
        this.sellerId = data.userid
        this.getsellorById(this.sellerId)
        this.otherimg=data.otherimg
        console.log(this.otherimg)
        this.videourl=data.videourl
        console.log(this.videourl)
      })
    },
    getsellorById(id){
      this.axios.get(`${baseUrl}/user/userinfo/` + id).then(
        res=>{
          this.sellor=res.data.data
        }).catch(
          err=>{
            console.log(err)
          }
      )
    },
    collect () {
      let collect = {
        colloperate: 1,
        commid: this.id,
        commname: this.product.commname,
        commdesc: this.product.commdesc,
        cmuserid: this.sellerId,
        username: this.sellor.username,
        school: this.product.school
      }
      console.log(collect)
      this.axios.post(`${baseUrl}/collect/operate`,collect).then(res=>{
        if(res.data.status===200){
          this.$message.success('加入购物车成功')
        }
      })
    },
    buyNow(){
     this.axios.get(`${baseUrl}/user/changecommstatus/${this.id}/4`).then(
       res=>{
         if(res.data.status===200){
           this.$message.success('购买成功，快去看看吧')
         }
       }
     )
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    sendInfo(){
      let date = Moment().format('YYYY-MM-D HH:mm:ss')
      let info={'username': this.username,'tousername': this.sellor.username,'content':this.textInfo,'sendtime':date}
      this.ws.send(JSON.stringify(info))
      this.havesend.push(this.textInfo)
      this.textInfo=''
    },
    onOpen(){
      console.log('open')
    },
    onError(){
      console.log('error')
    },
    onMessage(event){
      let res=JSON.parse(event.data)
      this.havereceive.push(res)
    },
    onClose(){
      console.log('close')
    },
  }
  }
</script>

<style scoped>
.itemInfo{
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: -15px;
}

.chatContainer{
  height: 100%;
}
.headerContainer{
  background-color:rgb( 1, 186, 255);
  height: 50px;
  text-align: center;
}
.headerContainer>h4{
  height: 50px;
  line-height: 50px;
  color: rgb(246, 255, 255);
}
.footerContainer{
  height: 200px;
}
h4>span{
  font-size: 16px;
}
.contextContainer{
  background-color: rgb(233, 236, 245);
  height: calc(100% - 250px);
}
.leftInfo{
  width: 100%;
  height: 100px;
  display: inline-block;
  padding: 10px;
}

.rightInfo{
  padding: 10px;
  height: 100px;
  width: 100%;
}
.box {
  margin-top: -40px;
  margin-left: 60px;
  width: 100px;
  min-height: 50px;
  padding: 10px;
  color: white;
  background: #2aa1c8;
  position: relative;
  border-radius:10px;
  border:1px solid #1c82a3;
}
.box:before{
  content:"";
  position: absolute;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 6px solid #1c82a3;
  border-bottom: 9px solid transparent;
}
.box:after {
  content:"";
  position: absolute;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #2aa1c8;
  border-bottom: 10px solid transparent;
}


.box2 {
  float: right;
  margin-right: 60px;
  width: 100px;
  padding: 10px;
  color: white;
  min-height: 50px;
  background: #2aa1c8;
  position: relative;
  border-radius:10px;
  border:1px solid #1c82a3;
}
.box2:before{
  content:"";
  position: absolute;
  left: 100%;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 12px solid #1c82a3;
  border-bottom: 12px solid transparent;
}
.box2:after {
  content:"";
  position: absolute;
  left: 100%;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid #2aa1c8;
  border-bottom: 10px solid transparent;
}
.send{
  float: right;
  margin-top: 2px;
  margin-right: 10px;
}
</style>
